<script setup>
import dayjs from 'dayjs'
import { inject, onMounted, reactive } from 'vue'
import { getStyles } from './index'
const nodeConfig = reactive({
  nodeData: null,
  value: null,
  styles: null,
  isInit: false
})
const getNode = inject('getNode')
const updateData = (nodeData) => {
  const {
    contentValue,
    separator,
    format
  } = nodeData
  nodeConfig.styles = getStyles(nodeData)
  const is12Hours = format === 'hms'
  const formatString = `${is12Hours ? 'h' : 'HH'}${separator}mm${separator}ss`
  nodeConfig.value = dayjs(contentValue).format(formatString)
  nodeConfig.nodeData = nodeData
  nodeConfig.isInit = true
}

onMounted(() => {
  const node = getNode()
  const nodeData = node.getData()
  updateData(nodeData)
  node.on('change:data', ({ current }) => {
    updateData(current)
  })
})
</script>

<template>
  <div
    class="w-full h-full overflow-hidden"
    :style="nodeConfig.styles"
    v-if="nodeConfig.isInit"
    >{{ nodeConfig.value }}</div
  >
</template>
